
<template>
    <a-select ref="select" style="width: 200px;margin-bottom: 16px;" v-model:value="machineId" allowClear
        placeholder="请选择机器" @change="refreshEcharts">
        <a-select-option v-for="item in machineList" :value="item.machineId">{{ item.machineId }}</a-select-option>
    </a-select>

    <div class="income-tabs">
        <div class="income-tab" :class="{ 'active-tab': currentTab == '1' }" @click="changeTab('1')">月收入</div>
        <div class="income-tab" :class="{ 'active-tab': currentTab == '2' }" @click="changeTab('2')">周收入</div>
        <div class="income-tab" :class="{ 'active-tab': currentTab == '3' }" @click="changeTab('3')">日收入</div>
    </div>

    <a-range-picker v-model:value="initMonthValue" @change="refreshEcharts" />

    <div class="card-content" style="height:500px;width: 100%;">
        <div id="charts" ref="charts" style="width:100%;height:100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'
import { incomeApi } from '@/api/modules/api.owner'
import { getMachineListApi } from 'api/modules/api.ownerMachine'
import dayjs from 'dayjs';

// 初始化表格
let myChart = null
const charts = ref()
function init() {
    myChart = echarts.init(charts.value);
    let option = {
        color: ['#4DCB73'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: 50,
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data.value.moneyX
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                smooth: true,
                emphasis: {
                    focus: 'series'
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(77, 203, 115, 0.40)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(77, 203, 115, 0.00)'
                        }
                    ])
                },
                data: data.value.moneyY
            },

        ]
    };

    option && myChart.setOption(option);
}

/**
 * 页面初始化
 */
onMounted(async () => {
    await getIncome()
    init()
});

// 初始默认当前一个月
const initMonthValue = ref([]);
initMonthValue.value = [dayjs().subtract(30, 'day'), dayjs()]

// 初始当前日期
const initDayValue = ref()
initDayValue.value = dayjs()

const data = ref({})
const machineId = ref()
const getIncome = async () => {
    const params = {
        startDate: dayjs(initMonthValue.value[0]).format('YYYY-MM-DD') || '',
        endDate: dayjs(initMonthValue.value[1]).format('YYYY-MM-DD') || '',
        machineId: machineId.value,
        type: currentTab.value
    }

    const res = await incomeApi(params)
    if (res.code != 0) {
        return
    }

    const moneyX = res.data.moneyX || []
    data.value.moneyX = moneyX.map(item => {
        return dayjs(item).format('YYYY-MM-DD')
    })

    data.value.moneyY = res.data.moneyY || []
}

// 收入
const currentTab = ref('1')
const changeTab = async (type) => {
    currentTab.value = type
    await getIncome()
    init()
}

// 获取机器列表
const machineList = ref([])
const getList = () => {
    getMachineListApi().then(res => {
        res.code == 0 && (machineList.value = res.data.list)
    })
};

getList()

// 筛选条件刷新表格
const refreshEcharts = async () => {
    await getIncome()
    init()
}


</script>

<style scoped lang="scss">
.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;

    .card-title {
        font-weight: 550;
        color: #223354;
        margin-right: 20px;
    }
}

.card-content {
    display: flex;
}

.income-tabs {
    display: flex;
    margin-bottom: 16px;

    .income-tab {
        padding: 12px 16px;
        color: #223354;
        font-family: PingFang SC;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        border-bottom: 2px solid #E8E8E8;
        margin-right: 24px;
        cursor: pointer;
    }

    .active-tab {
        color: #0077FF;
        border-bottom: 2px solid #0077FF;
    }

}
</style>